// 百度地图
<template>
  <!-- <div id="containerxx" style="width: 100%; height: 100%"></div> -->
  <div id="amapContainer" style="width: 100%; height: 100%"></div>
</template>
<script>
const AMap = window.AMap
export default {
  data() {
    return {
      query: {},
      map: '',
      lnglat: [],
    }
  },
  created() {
    this.query = this.$route.query
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 展示地图
    initMap() {
      this.lnglat = [this.query.lat, this.query.lng] // 地图坐标
      var _this = this
      const map = new AMap.Map('amapContainer', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 20, // 初始化地图层级
        center: _this.lnglat, // 初始化地图中心点
      })
      this.map = map
      var geocoder = new AMap.Geocoder({
        city: '010', // 城市设为北京，默认：“全国”
        radius: 1000, // 范围，默认：500
      })
      this.regeoCode(geocoder)
      // 比例尺
      map.plugin(['AMap.Scale', 'AMap.ToolBar'], function () {
        var scale = new AMap.Scale()
        map.addControl(scale)
        var toolBar = new AMap.ToolBar()
        map.addControl(toolBar)
      })
    },
    // 中文位置提示
    regeoCode(geocoder) {
      var _this = this
      var marker = new AMap.Marker()
      this.map.add(marker)
      marker.setPosition(this.lnglat)
      geocoder.getAddress(this.lnglat, function (status, result) {
        console.log(status, result)
        if (status === 'complete' && result.regeocode) {
          var address = result.regeocode.formattedAddress
          _this.onComplete(address)
        } else {
          _this.onComplete('根据经纬度查询地址失败')
        }
      })
    },
    onComplete(data) {
      // data是具体的定位信息
      console.log('定位成功信息：', data)
      // 实例化信息窗体
      var title = '运维主机地址'
      var content = []
      content.push(`地址：${data}`)
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: this.createInfoWindow(title, content.join('<br/>')),
        offset: new AMap.Pixel(16, -45),
      })
      console.log(this.map, infoWindow, this.lnglat)
      this.addMarker(infoWindow)
    },
    addMarker(infoWindow) {
      var _this = this
      _this.map.clearMap()
      var marker = new AMap.Marker({
        map: _this.map,
        position: this.lnglat,
      })
      // 鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(marker, 'click', function () {
        infoWindow.open(_this.map, marker.getPosition())
      })
    },
    // 构建自定义信息窗体
    createInfoWindow(title, content) {
      var info = document.createElement('div')
      info.className = 'custom-info input-card content-window-card'
      // 可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = "400px";
      //  定义顶部标题
      var top = document.createElement('div')
      var titleD = document.createElement('div')
      var closeX = document.createElement('img')
      top.className = 'info-top'
      titleD.innerHTML = title
      closeX.src = 'https://webapi.amap.com/images/close2.gif'
      closeX.onclick = this.closeInfoWindow
      top.appendChild(titleD)
      top.appendChild(closeX)
      info.appendChild(top)
      // 定义中部内容
      var middle = document.createElement('div')
      middle.className = 'info-middle'
      middle.style.backgroundColor = 'white'
      middle.innerHTML = content
      info.appendChild(middle)
      // 定义底部内容
      var bottom = document.createElement('div')
      bottom.className = 'info-bottom'
      bottom.style.position = 'relative'
      bottom.style.top = '0px'
      bottom.style.margin = '0 auto'
      var sharp = document.createElement('img')
      sharp.src = 'https://webapi.amap.com/images/sharp.png'
      bottom.appendChild(sharp)
      info.appendChild(bottom)
      return info
    },
    // 关闭信息窗体
    closeInfoWindow(map) {
      console.log(map)
      this.map.clearInfoWindow()
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
// 地址框样式
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}
.info-middle img {
  float: left;
  margin-right: 6px;
}
</style>
